<template>
	<div>
		<view class="container">
			<div v-if="card.id" class="ibox">
				<div>套餐：{{ card.cardTypeName }}</div>
				<div style="color: brown;">价格：¥{{ price }}</div>
			</div>
			<div v-else class="ibox mb10 i1">
				<div class="theme">{{ info.stadiumName }}</div>
				<div class="c80">已预定项目：</div>
			</div>
			<div class="flexB wrap">
				<div class="ii" v-for="(i, idx) in list" :key="idx">
					<div>{{ i.reserveDate }}</div>
					<div>{{ i.venueName + ' ' + i.stadiumTime }}</div>
				</div>
			</div>
			<div class="ibox mb10 i2">
				<div class="mb10">支付方式</div>
				<div class="flexB mb10">
					<div><uni-icons style="margin-right: 10px;" color="#FF8A00" type="wallet-filled" size="20"></uni-icons> 账户支付<span class="f12 theme">余额：¥{{ balance }}</span>
					</div>
					<radio :checked="pay == 1" color="#007aff" @click="pay = 1" />
				</div>
				<div class="flexB">
					<div><uni-icons style="margin-right: 10px;" color="#09BB07" type="weixin" size="20"></uni-icons> 微信支付</div>
					<radio :checked="pay == 2" color="#007aff" @click="pay = 2" />
				</div>
			</div>
		</view>
		<div class="flexB sub ac">
			<div class="tt f18">
				<span style="font-size: 12px;">实付</span>¥{{ price }} 
				<span v-if="pickuoPrice && pickuoPrice!=10" style="font-size: 12px; margin-left: 10px; color: #3254c3;"><span style="text-decoration: line-through;">¥{{ totalPrice }}</span> 折扣 {{ pickuoPrice }}折</span>
			</div>
			<div class="btn" @click="submit">提交订单</div>
		</div>
	</div>
</template>

<script>
import goodsItem from "@/components/goodsItem";

export default {
	components: { goodsItem },
	data() {
		return {
			deliveryType: 1,
			balance: 0,
			isOrder: 0,
			pay: 1,
			no: '',
			info: {},
			card: {},
			price: 0,
			totalPrice: 0,
			pickuoPrice: 0,
			list: []
		}
	},
	onLoad(p) {
		this.isOrder = p.isOrder;
		this.no = p.no;
		this.getList();
		this.$request({
			url: '/wx/user/getUseInfo',
			method: 'get',
		}).then(res => {
			this.balance = res.data.balance || 0;
		});
	},
	computed: {
		
	},
	methods: {
		getList() {
			this.$request({
				url: '/orderList/orderDetail',
				method: 'get',
				data: {
					pickupNo: this.no,
				},
			}).then(res => {
				this.list = res.data.stadiumList;
				this.info = res.data.tstadiumVenueInfo;
				this.totalPrice = res.data.pickup.totalPrice;
				this.price = res.data.pickup.totalPrice - res.data.pickup.discountPrice;
				this.pickuoPrice =res.data.pickup.pickuoPrice;
				this.card = res.data.tpickupStadiumCard
			})
		},
		submit() {
			if (this.pay == 1 && (this.balance == 0 || this.balance<this.price)) return this.$msg('余额不足');
			if (this.pay == 1) this.pay1()
			if (this.pay == 2) this.pay2()
		},
		goDetail() {
			if(this.isOrder == 1) return uni.navigateBack();
			uni.redirectTo({
				url: `/pages/orderDetail?no=${this.no}&type=1`
			});
		},
		pay1() {
			this.$request({
				url: '/wxpay/balancePay',
				method: 'get',
				data: {
					pickNo: this.no
				}
			}).then(res => {
				this.goDetail(res.data);
			})
		},
		pay2() {
			this.$request({
				url: '/wxpay/unifiedOrder',
				method: 'get',
				data: {
					pickNo: this.no
				}
			}).then(res => {
				let obj = res.data.jsConfig;
				uni.requestPayment({
					provider: 'wxpay',
					package: obj.packageValue,
					timeStamp: obj.timeStamp,
					nonceStr: obj.nonceStr,
					signType: obj.signType,
					paySign: obj.paySign,
					success: (res2)=> {
						this.goDetail({ pickupNo: res.data.orderNo, orderType: 1 });
					},
					fail: (err) =>{
						this.$msg('未支付');
						console.log('fail:' + JSON.stringify(err));
					}
				});
			})
		}
	}
}
</script>

<style lang="scss">
.ii {
	width: 49%;
	background: $theme;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	color: #fff;
	font-size: 24rpx;
	margin-bottom: 10px;
}

.i1 {
	background: linear-gradient(180deg, #FFFFFF 0%, #EAF6FD 100%);
}

.i2 {
	background: linear-gradient(180deg, #FFFFFF 0%, #EBF5EC 100%);
}

.sub {
	position: fixed;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	height: 100px;
	padding: 0 20px 10px;
	background: #fff;
	border-top: 1px solid #eee;
}

.tt {
	color: red;
}

.btn {
	text-align: center;
	width: 100px;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	background: $theme;
	color: #fff;
}
</style>